<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tree.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/accordion.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tabs.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/nav.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/layout-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/tree-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/accordion-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/tabs-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/nav-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <style>
        .layout_el {
            width: 100%;
            height: 450px;
        }
    </style>
</head>

<body>
    <div id="fulllayout" class="layout_el">
    </div>
    <div id="layout1" class="layout_el" style="margin-top: 12px;">
    </div>
    <div id="layout2" class="layout_el" style="margin-top: 12px;">
    </div>
    <div id="layout3" class="layout_el" style="margin-top: 12px;">
    </div>

    <script type="text/javascript">

        function createAccordion(el) {
            var opts = {
                iconCls: 'fa-angle-double-right', //收起图标
                iconPositon: 'right', //图标位置
                iconColor: '#666666', //图标颜色           
                onCreate: function (name) {
                    console.log(name + "  onCreate " + this.outerHTML);
                },
                onOpened: function (name) {
                    console.log(name + "  onOpened " + this.outerHTML);
                },
                onLoaded: function (data, title, type) { //加载完成                   
                    if (type === "json") {
                        console.log(JSON.stringify(data));
                        this.innerHTML = "<div><ul/></div>";
                        let ul = this.firstChild.firstChild;
                        new $B.Tree(ul, {
                            data: data,
                            url: 'tree.json',
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                },
                items: [{
                    title: '项目远程加载html片段',
                    icon: 'fa-menu',
                    type: 'html',
                    url: "fragment.html"
                },
                {
                    actived: true,
                    title: '远程加载页面【firame】',
                    type: 'iframe',
                    icon: 'fa-database',
                    url: "resize.html"
                },
                {
                    title: '远程加载json',
                    type: 'json',
                    icon: 'fa-cubes',
                    url: "tree.json"
                },
                {
                    title: '项目A',
                    content: '<div>项目静态内容</div>'
                },
                {
                    title: '项目B',
                    content: '<div>项目静态内容</div>'
                }
                ]
            };
            accordion = new $B.Accordion(el, opts);
        }

        function createNav(el) {
            var clickFn = function (e) {
                console.log(e);
            };
            var children = [
                {
                    text: '二级菜单1',
                    iconCls: 'fa-lightbulb'
                },
                {
                    text: '二级菜单110',
                    iconCls: 'fa-lightbulb',
                    children: [
                        {
                            text: '确认删除',
                            iconCls: ' fa-scissors'
                        },
                        {
                            text: '退出菜单',
                            iconCls: 'fa-forward'
                        }]
                },
                {
                    text: '二级菜单2',
                    iconCls: ' fa-print-1'
                }
            ];
            var navData = [
                {
                    text: '系统菜单A',
                    iconCls: 'fa-attach',
                    children: [
                        {
                            text: '二级菜单1',
                            iconCls: 'fa-lightbulb',
                            click: clickFn,
                            children: children
                        },
                        {
                            text: '二级菜单2',
                            iconCls: ' fa-print-1',
                            click: clickFn
                        }
                    ]
                },
                {
                    text: '菜单项目AA',
                    iconCls: 'fa-attach',
                    actived: true
                },
                {
                    text: '菜单项目B',
                    iconCls: 'fa-cog'
                },
                {
                    text: '菜单项目C',
                    iconCls: 'fa-ok-circled',
                    children: [
                        {
                            text: '二级菜单1',
                            iconCls: 'fa-lightbulb'
                        },
                        {
                            text: '二级菜单110',
                            iconCls: 'fa-lightbulb',
                            children: [
                                {
                                    text: '确认删除',
                                    iconCls: ' fa-scissors'
                                },
                                {
                                    text: '退出菜单',
                                    iconCls: 'fa-forward'
                                }]
                        },
                        {
                            text: '二级菜单2',
                            iconCls: ' fa-print-1'
                        }
                    ]
                },
                {
                    text: '菜单项目D',
                    iconCls: 'fa-layout'
                },
                {
                    text: '菜单项目E',
                    iconCls: 'fa-share-2',
                    closed: true,
                    children: [
                        {
                            text: '二级菜单1',
                            iconCls: 'fa-lightbulb'
                        },
                        {
                            text: '二级菜单2',
                            iconCls: ' fa-print-1',
                            actived: true,
                        }
                    ]
                },
                {
                    text: '菜单项目9',
                    iconCls: 'fa-cog'
                }
            ];

            new $B.Nav(el, {
                style: 'v',  //v 垂直风格，h水平风格
                datas: navData,
                backgroundColor: "#545C64", //整体背景色
                fontColor: "#fff",//图标字体颜色
                hoverColor: "#34393B", //鼠标移动上来的选项背景色
                activedColor: "#fff",//激活选项的背景色
                actFontColor: "#8E9503",//激活状态的图标字体颜色
                click: function (e) {
                    console.log(e);
                }
            })
        }

        function createTabs(el) {
            var treeObj1;
            var clickFn = function (e) {
                console.log(e);
            };
            var tabs = [{
                fixed: true,
                id: '0001',
                text: "用户管理",
                iconCls: 'fa-user',
                content: '<p style="color:red">用户管理</p>'
            }, {
                id: '0002',
                text: "机构管理",
                iconCls: 'fa-sitemap',
                url: 'fragment.html'
            }, {
                id: '0003',
                text: "角色管理",
                // iconCls: 'fa-address-card-o',
                url: 'resize.html',  //resize.html fullpage
                dataType: 'iframe'
            }, {
                id: '0004',
                text: "菜单管理",
                iconCls: 'fa-list-bullet',
                url: 'tree.json',
                dataType: 'json'
            }, {
                id: '0005',
                text: "自定义Tab6",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义Tab66666</p>'
            }, {
                id: '0007',
                text: "自定义Tab7",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义T让他让他也让他有ab66666</p>'
            }, {
                id: '0008',
                text: "自定义Tab8",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义try让他Tab66666</p>'
            }, {
                id: '0009',
                text: "自定义Tab9",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义Tab6规划局规划局6666</p>'
            }, {
                id: '00010',
                text: "自定义Tab61",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义Tab66玩儿玩儿玩儿666</p>'
            }, {
                id: '00011',
                text: "自定义Tab62",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义Tab6味儿微微儿6666</p>'
            }, {
                id: '00012',
                text: "自定义Tab63",
                iconCls: 'fa-user',
                content: '<p style="color:red">自定义Tab66任务热666</p>'
            }];
            new $B["Tabs"](el, {
                style: 'plain',  //plain简约风格，normal常规风格，card卡片风格
                headSize: '35px',
                closeable: true,
                haverClose: true,
                reload: false,
                position: "top",
                onClick: function (prs) {
                    console.log(prs);
                },
                onLoaded: function (opt, datas) {
                    let el = this;
                    if (opt.dataType === "json") {
                        if (treeObj1) {
                            treeObj1.destroy();
                        }
                        el.innerHTML = "<div><ul/></div>";
                        let ul = el.firstChild.firstChild;
                        treeObj1 = new $B.Tree(ul, {
                            data: datas,
                            url: 'tree.json',
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                },
                tabs: tabs
            });
        }

        function pageLoaded() {
            $B.DomUtils.resize(window, (e) => {
                console.log("window resize ");
            });
            let id = $B.Layout({
                el: "fulllayout",
                top: { size: 60, css: { background: "#8BCBF7" }, overflow: "hidden" },
                left: {
                    size: 200,
                    resizebar: {
                        iconColor: "#000",
                        backgroundColor: "#C9B9FF",
                        iconColorAct: "#FFF",
                        backgroundColorAct: "#8BCBF7"
                    },
                    css: { background: "#DEFCFF" },
                    overflow: "diy",
                    diyScrollColor: '#5539F5'
                },
                bottom: { size: 30, css: { background: "#8BCBF7" }, overflow: "hidden" },
                right: {
                    size: 300, 
                    css: { background: "#E8EDFF" },
                    overflow: "hidden",
                    diyScrollColor: '#00FC46',
                    resizebar: {
                        iconColor: "#000",
                        backgroundColor: "#C9B9FF",
                        iconColorAct: "#FFF",
                        backgroundColorAct: "#8BCBF7"
                    }
                },
                center: { css: { background: "#EDF7FF" }, overflow: "diy", diyScrollColor: '#5A5A5F' },
                onRender: (flag, el) => {
                    if (flag === "left") {
                        el.innerHTML = "<div><ul/></div>";
                        let ul = el.firstChild.firstChild;
                        treeObj1 = new $B.Tree(ul, {
                            nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
                            nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
                            leafNodeIcon: 'fa-mail-alt',                //子节点图标 
                            chkEmptyIcon: 'fa-check-empty',            //不选
                            chkAllIcon: 'fa-check',            //全选
                            chkSomeIcon: 'fa-minus-squared',              //部分选 ***/      
                            fontIconColor: '#8E03F5',
                            url: 'tree.json',
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                        return;
                    } else if (flag === "right") {
                        createAccordion(el);
                        return;
                    }
                    console.log("onRender =" + flag);
                    if (flag === "top") {
                        flag = " <h6>左右区域支持伸缩、长按拖动！ 可隐藏自定义的滚动条！</p>";
                    }
                    el.innerHTML = "<p>内容：" + flag + "</p>";
                    console.log(el);
                    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> onReader");
                }
            });
            console.log("layout id = " + id);



            $B.Layout({
                el: "layout1",
                top: { size: 60, css: { background: "#8BCBF7" }, overflow: "diy" },
                left: {
                    size: 200,  css: { background: "#0F8DE9" }, overflow: "auto",
                    resizebar: {
                        iconColor: "#000",
                        backgroundColor: "#AAFCDB",
                        iconColorAct: "#FA001A",
                        backgroundColorAct: "#8BCBF7"
                    }
                },
                bottom: { size: 30, css: { background: "#8BCBF7" } },
                center: { css: { background: "#EDF7FF" }, overflow: "diy" },
                onRender: (flag, el) => {
                    console.log("onRender =" + flag);
                    if (flag === "top") {
                        flag = " <h6>左区域支持伸缩、长按拖动！ 原生的滚动条！</p>";
                    }
                    el.innerHTML = "<p>上左中下布局内容：" + flag + "</p>";
                    console.log(el);
                    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> onReader");
                }
            });


            $B.Layout({
                el: "layout2",
                top: { size: 35, css: { background: "#8BCBF7" }, overflow: "hidden" },
                left: { size: 200,  css: { background: "#0F8DE9" }, overflow: "diy" ,
                    resizebar: {
                        iconColor: "#000",
                        backgroundColor: "#C9B9FF",
                        iconColorAct: "#FFF",
                        backgroundColorAct: "#8BCBF7"
                    }},
                center: { css: { background: "#EDF7FF" }, overflow: "hidden" },
                onRender: (flag, el) => {
                    if (flag === "left") {
                        createNav(el);
                        return;
                    }
                    if (flag === "center") {
                        createTabs(el);
                        return;
                    }
                    if (flag == "top") {
                        el.innerHTML = "<div class='k_box_size' style='border-left:200px solid #0F8DE9;position:absolute;height:100%;top:0;left:0;width:100%;'></div><div class='k_box_size' style='position:absolute;height:100%;top:0;left:0;width:200px;'><h5>LOGO</h5></div>";
                    }

                }
            });

            $B.Layout({
                el: "layout3",
                top: { size: 60, css: { background: "#8BCBF7" }, overflow: "hidden" },
                bottom: { size: 30, css: { background: "#8BCBF7" }, overflow: "auto" },
                center: { css: { background: "#EDF7FF" }, overflow: "diy" },
                onRender: (flag, el) => {
                    console.log("onRender =" + flag);
                    el.innerHTML = "<p>上中下布局 内容：" + flag + "</p>";
                    console.log(el);
                    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> onReader");
                }
            });

        };




        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>